<template>
	<div style="width: 100vw;" ref="scroll" id="all">
		<div class="section">
			<div class="t1s">
				<div class="div2" style="width: 100%;margin: auto;">
					<div v-show="islogin">
						<table style="width:60%;margin: auto;">
							<tr>
								<td class="title" style="text-align: left;">
									<p @click="registers()" style="text-align: center;margin-top: 25%;color: red;font-size: 20px;cursor: pointer;">
										首次登录请先完成账户注册>>></p>
									<div style="display: inline-block;width: 70%;margin-left: 30%;margin-top: 3%;">
										<form>
											<span>手机号：<el-input v-model="phone" id="phone" style="width: 260px"
													type="text" name="phone" placeholder="请输入手机号" required></el-input></span>
											<br />
											密<span style="margin-left: 1em;"></span>码：<el-input v-model="pwd" id="pwd" style="width: 260px"
												type="text" name="pwd" placeholder="请输入密码" show-password></el-input>
												<el-button  style="color: red;margin-left: 10px;border: none;"
													id="hq" @click="dialogVisible=true">忘记密码？</el-button>
											<br />
											<el-button type="primary" @click="login()" class="ipt">登录</el-button>
										</form>
									</div>
									
								</td>
							</tr>
						</table>
					</div>
					
					<div v-show="!islogin">
						<table style="width:60%;margin: auto;margin-top: 10%;">
							<tr>
								<td class="title" style="text-align: left;">
									<div style="display: inline-block;width: 70%;margin-left: 30%;margin-top: 2%;">
										<el-form :model="neweditForm">
											<span>卡<span style="margin-left: 2em;"></span>号：
												<el-input v-model="neweditForm.cardCode" id="phone"
													style="height: 30px;width: 300px" type="text" name="phone"
													placeholder="请输入卡号"></el-input>
											</span><br />
											<span>初始密码：
												<el-input v-model="neweditForm.codepwd" id="phone"
													style="height: 30px;width: 300px;margin-top: 15px;" type="text"
													name="phone" placeholder="请输入会员卡密码"></el-input>
											</span><br />
											<span>姓<span style="margin-left: 2em;"></span>名：
												<el-input v-model="neweditForm.nickName" id="phone"
													style="height: 30px;width: 300px;margin-top: 15px;" type="text"
													name="phone" required placeholder="请输入姓名" maxlength="12"></el-input></span><br/>
											<span>新设密码：
												<el-input v-model="neweditForm.password" id="phone"
													style="height: 30px;width: 300px;margin-top: 15px;" type="text"
													name="phone" required placeholder="请设置登录密码"></el-input></span><br />
											<span>再次输入：
												<el-input v-model="neweditForm.passwords" id="phone"
													style="height: 30px;width: 300px;margin-top: 15px;" type="text"
													name="phone" required placeholder="请确认登录密码"></el-input></span><br />
											<span>手<span
													style="margin-left: 0.5em;margin-right: 0.5em;">机</span>号：
												<el-input v-model="neweditForm.phone" id="phone"
													style="height: 30px;width: 300px;margin-top: 15px;" type="text"
													name="phone" placeholder="一个手机号只能注册(绑定)一个账号" required></el-input></span><br />
											验<span style="margin-left: 0.5em;margin-right: 0.5em;">证</span>码：
											<el-input v-model="code" style="height: 30px;width: 300px;margin-top: 15px"
												type="text" name="pwd" placeholder="请输入验证码"></el-input>
											<el-button v-show="shows" style="color: red;margin-left: 10px;border: none;" id="hq"
												@click="obtain()">获取验证码</el-button>
												<el-button v-show="!shows"
													style="color: red;margin-left: 10px;border: none;">{{counts}}s
												</el-button><br />
											<el-button type="primary" @click="submitForm()" class="ipt"
												style="margin-left: 105px;width: 120px;">注册</el-button>
											<el-button type="primary" @click="gologin()" class="ipt"
												style="margin-left: 12px;width: 120px;">返回登录</el-button>
										</el-form>
									</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</div>
		
		<el-dialog
		  title="找回密码"
		  :visible.sync="dialogVisible"
		  width="30%"
		  :close-on-click-modal="false"
		  style="text-align: center;"
		  >
		  <el-form label-width="80px" ref="neweditForm" >
			  <div style="margin-left: 25%;width: 70%;">
				  <span style="display: inline-block;width: 100%;text-align: left;">手机号：<el-input v-model="sjh" style="width: 50%;"></el-input></span><br/>
				  <span style="display: inline-block;width: 100%;text-align: left;">
					  验证码：<el-input v-model="yzm" style="width: 50%;margin-top: 20px;"></el-input>
					  <el-button v-show="show" style="color: red;margin-left: 10px;border: none;" id="hq"
					  	@click="zhyz()">获取验证码</el-button>
						<el-button v-show="!show"
							style="color: red;margin-left: 10px;border: none;">{{count}}s
						</el-button>
				  </span>
				  
			  </div>	
		  			</el-form>
		    <el-button type="primary" style="margin-top: 20px;width: 180px;margin-left: 35px;" @click="yz()">确定</el-button>
		</el-dialog>
		
		<el-dialog
		  title="修改密码"
		  :visible.sync="dialogVisibles"
		  width="30%"
		  :close-on-click-modal="false"
		  >
		 <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
		   <el-form-item label="密码" prop="pass">
		     <el-input type="password" v-model="ruleForm.pass" autocomplete="off" style="width: 80%;"></el-input>
		   </el-form-item>
		   <el-form-item label="确认密码" prop="checkPass">
		     <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" style="width: 80%;"></el-input>
		   </el-form-item>
		   <el-form-item>
		     <el-button type="primary" style="width: 160px;margin-left: 100px;" @click="xgmm('ruleForm')">提交</el-button>
		   </el-form-item>
		 </el-form>
		</el-dialog>
	</div>
	
</template>
<script>
	import {
		request
	} from "../../util/request.js"
	export default {
		inject: ['reload'],
		data() {
			      var validatePass = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请输入密码'));
			        } else {
			          if (this.ruleForm.checkPass !== '') {
			            this.$refs.ruleForm.validateField('checkPass');
			          }
			          callback();
			        }
			      };
			      var validatePass2 = (rule, value, callback) => {
			        if (value === '') {
			          callback(new Error('请再次输入密码'));
			        } else if (value !== this.ruleForm.pass) {
			          callback(new Error('两次输入密码不一致!'));
			        } else {
			          callback();
			        }
			      };
			return {
				url:'https://beian.miit.gov.cn/',
				shows:true,
				counts:'',
				timers:null,
				timer: null,
				count: '',
				show: true,
				dialogVisibles:false,
				 ruleForm: {
				          pass: '',
				          checkPass: ''
				        },
				        rules: {
				          pass: [
				            { validator: validatePass, trigger: 'blur' }
				          ],
				          checkPass: [
				            { validator: validatePass2, trigger: 'blur' }
				          ]
				        },
				islogin:true,
				code: '',
				pwd: '',
				phone: '',
				neweditForm: {
					id: '',
					nickName: '',
					cardCode: '',
					codepwd: '',
					school: '',
					majorType: '',
					year: '',
					phone: '',
					openid:''
				},
				dialogVisible:false,
				sjh:'',
				yzm:''
			}
		},
		methods: {
			togxb() {
			window.open(this.url)
			},
			submitForm() {
				const _this = this
				if (this.neweditForm.cardCode == null || this.neweditForm.cardCode == '') {
					this.$message({
						message: "请输入卡号！",
						type: 'error'
					});
				} else if (this.neweditForm.codepwd == null || this.neweditForm.codepwd == '') {
					this.$message({
						message: "请输入会员卡密码！",
						type: 'error'
					});
				} else if (this.neweditForm.nickName == null || this.neweditForm.nickName == '') {
					this.$message({
						message: "请输入姓名！",
						type: 'error'
					});
				} else if (this.neweditForm.nickName == null || this.neweditForm.nickName == '') {
					this.$message({
						message: "请输入姓名！",
						type: 'error'
					});
				} else if (this.neweditForm.password == null || this.neweditForm.password == '') {
					this.$message({
						message: "请输入登录密码！",
						type: 'error'
					});
				} else if (this.neweditForm.password!=this.neweditForm.passwords) {
					this.$message({
						message: "两次输入登录密码不一致！",
						type: 'error'
					});
				}else if (this.neweditForm.phone==null||this.neweditForm.phone=='') {
					this.$message({
						message: "请输入手机号！",
						type: 'error'
					});
				}else if (this.code == null || this.code == '') {
					this.$message({
						message: "请输入验证码！",
						type: 'error'
					});
				} else {
					if ((this.neweditForm.cardCode != null && this.neweditForm.cardCode != '') && (this.neweditForm
							.codepwd == null || this.neweditForm.codepwd == '')) {
						this.$message({
							message: "请输入密码！",
							type: 'error'
						});
					} else {
						request({
							method: 'POST',
							url: 'sysUser/registers',
							data: this.neweditForm,
							params: {
								code: this.code,
								codepwd: this.neweditForm.codepwd
							}
			
						}).then(msg => {
							if (msg.code == 0 || msg.code == 200) {
								this.$message({
									message: msg.msg,
									type: 'success'
								});
								this.$router.go(0)
							} else {
								this.$message({
									message: msg.msg,
									type: 'error'
								});
							}
						})
					}
			
				}
			
			},
			obtain() {
				const _this = this
				const TIME_COUNT = 60
				if (_this.neweditForm.phone != null && _this.neweditForm.phone != "") {
					request({
						method: 'POST',
						url: 'sysUser/zyan',
						params: {
							phone: this.neweditForm.phone
						}
					}).then(msg => {
						if (msg.code == 0 || msg.code == 200) {
							if (!_this.timers) {
								_this.counts = TIME_COUNT;
								_this.shows = false;
								_this.timers = setInterval(() => {
									if (this.counts > 0 && this.counts <= TIME_COUNT) {
										this.counts--;
									} else {
										this.shows = true;
										clearInterval(this.timers);
										this.timers = null;
									}
								}, 1000)
							}
							this.$message({
								message: msg.msg,
								type: 'success'
							});
						} else {
							this.$message({
								message: msg.msg,
								type: 'error'
							});
						}
			
					})
				} else {
					this.$message({
						message: "请输入手机号！",
						type: 'error'
					});
				}
			},
			 xgmm(formName) {
			        this.$refs[formName].validate((valid) => {
			          if (valid) {
			            request({
			            	method: 'POST',
			            	url: 'sysUser/xgmm',
			            	params: {
			            		phone:this.sjh,
			            		pwd:this.ruleForm.pass
			            	}
			            }).then(msg => {
			            	if (msg.code == 0 || msg.code == 200) {
			            		this.$message({
			            			message: "修改成功！",
			            			type: "success"
			            		});
			            		this.dialogVisibles=false
			            	} else {
			            		this.$message({
			            			message: msg.msg,
			            			type: 'error'
			            		});
								this.dialogVisibles=false
			            	}
			            })
			          } else {
			            // console.log('error submit!!');
			            return false;
			          }
			        });
			      },
			yz(){
				if(this.sjh==null||this.sjh==''||this.yzm==null||this.yzm==''){
					this.$message({
						message: '手机号和验证码不能为空！',
						type: 'error'
					});
				}else{
					request({
						method: 'POST',
						url: 'sysUser/yz',
						params: {
							phone:this.sjh,
							code:this.yzm
						}
					}).then(msg => {
						if (msg.code == 0 || msg.code == 200) {
							this.$message({
								message: "验证码正确！",
								type: "success"
							});
							this.dialogVisibles=true
							this.dialogVisible=false
						} else {
							this.$message({
								message: msg.msg,
								type: 'error'
							});
						}
					})
				}
			},
			zhyz(){
				const TIME_COUNT = 60
				if(this.sjh==null||this.sjh==''){
					this.$message({
						message:'手机号不能为空',
						type: 'error'
					});
				}else{
					request({
						method: 'POST',
						url: 'sysUser/zhyz',
						data: this.sjh
					}).then(msg => {
						if (msg.code == 0 || msg.code == 200) {
							if (!this.timer) {
								this.count = TIME_COUNT;
								this.show = false;
								this.timer = setInterval(() => {
									if (this.count > 0 && this.count <= TIME_COUNT) {
										this.count--;
									} else {
										this.show = true;
										clearInterval(this.timer);
										this.timer = null;
									}
								}, 1000)
							}
							this.$message({
								message: "发送成功！",
								type: "success"
							});
						} else {
							this.$message({
								message: msg.msg,
								type: 'error'
							});
						}
					})
				}	
			},
			login(){
				request({
					method: 'POST',
					url: 'sysUser/expertLogin',
					params: {
						phone: this.phone,
						pwd: this.pwd
					}
				}).then(msg => {
					if (msg.code == 0 || msg.code == 200) {
						this.$message({
							message: "登录成功！",
							type: "success"
						});
						// console.log("进来了")
						this.reload();
						sessionStorage.setItem(msg.data.tokenInfo.tokenName, msg.data.tokenInfo.tokenValue)
						sessionStorage.setItem('userId', msg.data.user.userId)
						sessionStorage.setItem('user', JSON.stringify(msg.data.user))
						this.$store.dispatch('login', msg.data)
						this.$router.push({
							name: 'Home'
						});
					} else {
						this.$message({
							message: msg.msg,
							type: 'error'
						});
					}
				})
				
			},
			registers() {
				this.islogin=false
			},
			gologin(){
				this.islogin=true
			}
		},
		created() {


			
		}



	}
</script>

<style>
	.t1s {
		width: 1440px;
		min-width: 1440px;
		margin: auto;
		padding: 0;
	}

	.div2 {
		margin: auto;
		margin-top: 45px;
	}

	.t1s .ipt {
		width: 260px;
		border-radius: 5px;
		background-color: coral;
		color: #fff;
		text-align: center;
		border: 1px solid transparent;
		font-weight: 900;
		margin-top: 10px;
		margin-left: 60px;
	}

	.t1s #tab-first {
		width: 720px;
		text-align: center;
	}

	.t1s #tab-second {
		width: 720px;
		text-align: center;
	}

	.t1s input {
		border: 1px #68696a solid;
		border-radius: 5px;
		height: 35px;
	}

	#tpl_for_iframe {
		margin-left: 40%;
	}
	#pwd{
		height: 35px;
		margin-top: 20px;
	}
	.t1s .el-input .el-input__clear{
		margin-top: 20px;
		height: 35px;
	}
</style>
